<template>
  <div class="component-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      class="top-nav"
      @click-left="$router.back()"
      @click-right="isManage = !isManage"
      fixed
      placeholder
    >
      <template #left>
        <div class="top-nav-left">
          <van-icon name="arrow-left" color="#000" class="icon"/>
          <span>我的收货地址</span>
        </div>
      </template>
      <template #right>
        <span class="top-nav-right">{{isManage ? '退出' : '管理'}}</span>
      </template>
    </van-nav-bar>
    <!-- 地址列表 -->
    <van-radio-group v-model="radio">
    <div class="address-list">
      <div class="address-item" v-for="address in list" :key="address.id">
        <!-- 是否选中 -->
        <div class="selected" v-show="!isManage">
          <!-- <van-checkbox v-model="address.isSelected" checked-color="#ee0a24"></van-checkbox> -->
          <van-radio :name="address.id" checked-color="#ee0a24"></van-radio>
        </div>
        <!-- 删除按钮 -->
        <div class="delete" v-show="isManage" @click="deleteAddress(address.id)">
          <div>
            <van-icon name="minus" color="#fff" size="20"/>
          </div>
        </div>
        <!-- 姓名 手机号 -->
        <div class="name-tel">
          <span>{{address.name}}</span>
          <span>{{address.tel}}</span>
          <span v-if="address.isDefault">默认</span>
        </div>
        <!-- 收货地址 -->
        <div class="address">
          <span>{{address.address}}</span>
        </div>
        <!-- 编辑 -->
        <div class="edit" @click="onEdit(address.id)">
          <van-icon name="edit" size="25"/>
        </div>
      </div>
    </div>
    </van-radio-group>
    <!-- 新增地址 -->
    <van-goods-action v-show="!isManage">
      <van-goods-action-button
        type="danger"
        text="新增地址"
        @click="onAdd"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { AddressList,RadioGroup, Radio } from 'vant'
import { Checkbox, Dialog } from 'vant'
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'

export default {
  name: 'UserReceiveAddress',
  components: {
    [AddressList.name]: AddressList,
    [Checkbox.name]: Checkbox,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  data() {
    return {
      chosenAddressId: '1',
      list: [],
      isManage: false,
      radio: 0
    }
  },
  methods: {
    // 新增地址
    onAdd() {
      if (this.isManage) {

      } else {
        // Toast('新增地址');
        this.$router.push({name: 'addReceiveAddress'})
      }
    },
    // 编辑地址
    onEdit(id) {
      // Toast('编辑地址:' + index);
      // console.log(item.id, index);
      this.$router.push({
        name: 'addReceiveAddress',
        query: {
          id
        }
      })
    },
    // 删除地址
    deleteAddress(addressId) {
      Dialog.confirm({
        message: '确认删除选中的收货地址？',
      })
      .then(() => {
        // on confirm
        // 从数组中删除
        this.list = this.list.filter((item)=>{
          return item.id != addressId
        })
        this.req.get(
          'user/delete/userReceiveAddressInfo/id/',
          {
            params: {
              id: addressId
            }
          }
        ).then(res=>{
          let data = res.data
          if (data.mark === 1) {
            this.$toast.success(data.message)
            // this.$router.back()
            // this.$router.replace({name: 'receiveAddress'})
          } else {
            this.$toast.fail(data.message)
          }
        }, err=>{
          this.$toast.fail(err)
        })
      })
      .catch(() => {
        // on cancel
      });
    }
  },
  created() {
    this.req.post(
      'user/get/userReceiveAddressInfo/',
      {
        token: localStorage.getItem('token')
      }
    ).then(res=>{
      let data = res.data
      if (data.mark === 1) {
        this.list = data.data
        this.list = this.list.sort((a, b)=>{
          return b.isDefault - a.isDefault
        })
      } else {
        this.$toast.fail(data.message)
      }
    }, err=>{
      this.$toast.fail(err)
    })
  }
}
</script>

<style lang="less" scoped>
// 顶部导航栏样式
.top-nav {
  border-bottom: 1px solid #ddd;
  // 顶部导航栏左边
  .top-nav-left {
    color: #000;
    font-size: 1.5rem;
    .icon {
      margin-right: 0.5rem;
      vertical-align: middle;
    }
    span {
      font-size: 1.2rem;
    }
  }
  // 顶部导航栏右边
  .top-nav-right {
    font-size: 1.1rem;
    color: #ee0a24;
  }
}
// 地址列表
.address-list {
  .address-item {
    position: relative;
    height: 5rem;
    margin: 0.5rem;
    border-radius: 1rem;
    background-color: #fff;
    .selected {
      position: absolute;
      top: 50%;
      left: 1rem;
      transform: translateY(-50%);
    }
    .delete {
      position: absolute;
      top: 50%;
      left: 0.9rem;
      transform: translateY(-50%);
      div {
        width: 2rem;
        height: 2rem;
        border-radius: 2rem;
        background-color: #ee0a24;
        line-height: 2.5rem;
        text-align: center;
      }
    }
    .name-tel {
      position: absolute;
      top: 1rem;
      left: 3.5rem;
      width: 75%;
      span {
        margin: 0 0.5rem 0 0;
        vertical-align: middle;
      }
      span:nth-child(1) {
        display: inline-block;
        max-width: 45%;
        /*1. 先强制一行内显示文本*/
        white-space: nowrap; 
        /*2. 超出的部分隐藏*/
        overflow: hidden;
        /*3. 文字用省略号替代超出的部分*/
        text-overflow: ellipsis;
      }
      span:nth-child(3) {
        padding: 0.1rem 0.2rem;
        border-radius: 0.2rem;
        background-color: #ee0a24;
        color: #fff;
      }
    }
    .address {
      position: absolute;
      top: 2.7rem;
      left: 3.5rem;
      width: 75%;
      /*1. 先强制一行内显示文本*/
      white-space: nowrap; 
      /*2. 超出的部分隐藏*/
      overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
    }
    .edit {
      position: absolute;
      top: 50%;
      right: 1rem;
      transform: translateY(-50%);
    }
  }
}
</style>